<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <!-- 准备标签 -->
     <div class="bigbox">hello</div>
     <div class="box">好看</div>
     <div class="box">计算机</div>
     <div class="box">cat</div>
     <div class="box">从头读</div>
     <p class="box">这是段落标签</p>  
     <p class="box">
        <span>这是段落里面的span标签</span>
    </p>
</body>
<script>
    //const 常量
    //querySelector('标签名')；获取的是该标签名的第一个元素
    const em1 = document.querySelector('div'); //在括号里面以字符形式写进去  //标签选择器
    console.log(em1);
    const em2 = document.querySelector('.box');  //类选择器
    console.log(em2);
    const em3 = document.querySelector('#box');   //id选择器
    console.log(em3);
    const em4 = document.querySelector('.box span li:nth-child(1)');    //复合选择器
    console.log(em4);
    console.log('---------------');
    const elm1 = document.querySelectorAll('div,.box1');
    console.log(elm1);   //伪数组
    for(let i = 0 ;i<elm1.length;i++){
        console.log(elm1[i]);
    }
    elm1[3].style.color = 'red';


</script> 
</html>